<style>
    .ui-helper-hidden-accessible {
        display: none;
    }
</style>
<?php $this->widget('zii.widgets.grid.CGridView', array(
    'id'=>'event-grid',
    'dataProvider'=>$dataProvider,
    'filter'=>$model,
    'ajaxUpdate'=> true,
    'template' => "{items} {pager}",
    'itemsCssClass' => 'table table-striped table-bordered',
    'pagerCssClass' => 'pagination pagination-centered',
    'pager'=>array(
        'class'=>'CLinkPager',
        'htmlOptions' => array(
            'class' => '',
        ),
        'hiddenPageCssClass' => 'disabled',
        'selectedPageCssClass' => 'active',
        'maxButtonCount'    =>  8,
        'header'            => FALSE,

    ),
    'loadingCssClass' => '',
    'beforeAjaxUpdate'=>'function(id,options){
        $("#ajax-loading").fadeIn();    
    }',
    'afterAjaxUpdate'=>'function(id,options){
        $("#ajax-loading").fadeOut();    
    }',
    'columns'=>array(
        array(
            'name' => 'id',
            'type'      =>  'html',
            'value' => '$data->id',
            'headerHtmlOptions' => array('style' => 'width: 10px'),
            'filter' => FALSE
        ),
        array(
            'name' => 'image',
            'type'      =>  'html',
            'value' => 'CHtml::image($data->getImageUrl($data->shop_id,$data->id), "", array("style" => "width: 100px"))',
        ),
        array(
            'name' => 'title',
            'type'      =>  'raw',
            'value' => '$data->title',
        ),
        array(
            'name' => 'desc',
            'type'      =>  'raw',
            'value' => '$data->desc',
        ),
        array(
            'name' => 'cats',
            'type'      =>  'raw',
            'value' => '$data->catLabelList',
            'filter' => $catData,
        ),
        array(
            'name' => 'manager_id',
            'type'      =>  'raw',
            'value' => '$data->manager["name"]',
        ),
        array(
            'name' => 'user_id',
            'type'      =>  'raw',
            'value' => '$data->user["name"]',
        ),
        array(
            'name' => 'frequencies',
            'type'      =>  'raw',
            'value' => '$data->frequencyLabelList',
            'filter' => $model->frequencyData,
        ),
        array(
            'name' => 'city_id',
            'type' => 'raw',
            'value' => '$data->city_id',
            'filter' => City::model()->getData()
        ),
        array(
            'name' => 'district_id',
            'type' => 'raw',
            'value' => '$data->district_id',
            'filter' => CHtml::dropDownList('Event[district_id]', $model->district_id, $districtsData)//$districtsData
        ),
        array(
            'name' => 'shop_name',
            'type'      =>  'raw',
            'value' => '$data->shop->name',
            'filter' => CHtml::textField('Event[shop_name]', $model->shop_name, array('id'=>'Event_shop_name', 'onfocus' => 'autocomplate($(this))'))
        ),
        array(
            'name' => 'created',
            'type'      =>  'raw',
            'value' => '$data->created'
        ),

        array(
            'name' => 'status',
            'type'      =>  'raw',
            'value' => '$data->statusLabel',
            'filter' => $model->statusData
        ),
        array(
            'class'=>'CButtonColumn',
            'template'=>'{update} {delete}',
        ),
    ),
)); ?>    
        <script>
                    function autocomplate(){
                        $("#ajax-loading").fadeIn(); 
                        var district_id = $('#Event_district_id').val();

                        $.post('<?php echo $this->createUrl('/admin/event/getShopDataJson')?>', {district_id : district_id}, function(shops){
                            suggest(shops);    
                        }).complete(function() { 
                            $("#ajax-loading").fadeOut();
                        });
                    };


                    function suggest(shops) {
                        var shops = $.parseJSON(shops);

                        $("#Event_shop_name").autocomplete({
                            delay: 100,
                            minLength: 0,
                            source: function(request, response) {
                                var key = $.ui.autocomplete.escapeRegex($.trim(request.term));
                                var matcher = new RegExp(key, "i" );
                                var datas2 = new Array();
                                var i = 0;
                                $.each(shops, function(index, data){ 
                                    if ((matcher.test(data) || matcher.test(data.toAlias())) && i < 10){
                                        console.log(index);
                                        datas2[i] = {label:data,labelhl:data.highlight(key),index:index};
                                        i++;      
                                    } 
                                });
                                console.log(datas2);
                                response(datas2);
                            }, 
                            messages: {
                                noResults: '',
                                results: function() {}
                            },
                            //                            focus: function( event, ui ) {
                            //                                $(this).val( ui.item.label );
                            //                                return false;
                            //                            },
                            select: function( event, ui ) {
                                $("#Event_shop_name").val(ui.item.value);
//                                $("#Event_shop_id").val(ui.item.index);

                                return false;
                            },
                            search: function(event, ui) { 

                            }
                        })
                        .data( "autocomplete" )._renderItem = function(ul, item) {
                            return $( "<li></li>" )
                            .data( "item.autocomplete", item )
                            .append( "<a style='cursor: pointer'>" + item.labelhl + "</a>")
                            .appendTo( ul );
                        };
                    }
                </script>